<template>
  <div class="hello">
   <!-- 柱形图渲染 -->
   <div id="chart">
 
   </div>
   <!-- 饼图渲染 -->
   <div id="pie">
 
  </div>
  </div>
</template>
 
<script>
export default {
  data(){
    return {
      ws: null,
      url:"http://localhost:8080/websocket/",
      barChart: null,
      pieChart: null,
      userId: null
    }
  },
  mounted(){
    //挂载的时候进行初始化
    this.init()
  },
  created(){
  
  },
  methods:{
    initChart(data){
      if(!this.barChart){
        this.barChart= this.$echarts.init(document.getElementById('chart'))
      }
      let chart = this.barChart
      const option = {
        title: {
          text: 'websocket测试',
          textStyle:{
            color: "white"
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['日销量'],
          textStyle:{
            color: "white"
          }
        },
        xAxis: {
          name: "日期",
          type: 'category',
          data: data.xAxisData,
          axisLabel:{
            color: "white"
          },
          nameTextStyle:{
            color: "white"
          }
        },
        yAxis: {
          type: 'value',
          name:"销量",
          axisLabel:{
            color: "white"
          },
          nameTextStyle:{
            color: "white"
          }
        },
        series: [
          {
            name: '日销量',
            type: 'bar',
            data: data.yAxisData
          }
        ]
      } 
      chart.setOption(option)  
    },
    init(){
      let obj = this.getUrlParams2(window.location.href)
      this.ws = new WebSocket(this.url+obj.userid)
      this.ws.onopen = this.websocketOnOpen;
      this.ws.onmessage = this.websocketOnMessage;
    },
    websocketOnOpen(){
      console.log("连接成功")
    },
    websocketOnMessage(datas){
      console.log(datas)
      if(datas.data !== "连接成功"){
        let res = JSON.parse(datas.data)
        if(res.type == 1){
            this.$message({
              type: "warning",
              message: res.msg
            })
        }else{
          this.initChart(JSON.parse(datas.data).server)
          this.initPie(JSON.parse(datas.data).pie)
        }
        
      }
    },
    getUrlParams2(url){
      let urlStr = url.split('?')[1]
      const urlSearchParams = new URLSearchParams(urlStr)
      const result = Object.fromEntries(urlSearchParams.entries())
      return result
    },
    initPie(pies){
      if(!this.pieChart){
        this.pieChart= this.$echarts.init(document.getElementById('pie'))
      }
      let chart = this.pieChart
      const option = {
          // legend 图例组件配置项 (图例,其实就是颜色指示器)
          legend: {
            top: "bottom", // 图例组件离容器上侧的距离。
          },
          // 工具栏组件
          toolbox: {
            show: true, // 是否显示工具栏组件
            feature: {
              mark: { show: false },
              dataView: { show: true, readOnly: false }, // 数据视图工具
              restore: { show: true },  // 配置项还原
              saveAsImage: { show: true }, // 保存图片
            },
          },
          series: [
            {
              name: "Nightingale Chart", // 名称
              type: "pie",  // 类型 饼图
              radius: [50, 150], // 饼图的半径 `50, 250 => 内半径 外半径`
              center: ["50%", "50%"], // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
              roseType: "area", // 是否展示成南丁格尔图，通过半径区分数据大小
              // 图形的颜色
              itemStyle: {
                borderRadius: 8,
              },
              // 图表的数据
              data: pies.pie,
            },
          ],
        };
        // 3.5 将配置参数和图表关联
        chart.setOption(option);
    }
  }
}
</script>
 
<style scoped lang="less">
  .hello{
    display: flex;
    #chart,#pie{
      width: 600px;
      height: 400px;
      background-color: black;
    }
    #pie{
      margin-left: 20px;
    }
  }
</style>